<!DOCTYPE html>
<html class="wide wow-animation" lang="en">
	<head>
		<title>青年筑梦</title>
		<meta name="format-detection" content="telephone=no">
		<meta name="viewport"
			content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta charset="utf-8">
		<link rel="icon" href="images/favicon.ico" type="image/x-icon">
		<!-- Stylesheets-->
		<link rel="stylesheet" type="text/css"
			href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700%7CPoppins:400%7CTeko:300,400">
		<link rel="stylesheet" href="css/bootstrap.css">
		<link rel="stylesheet" href="css/fonts.css">
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/light.min.css">

		<style>
			.travel-slider {
				font-family: Arial, sans-serif;
				overflow: hidden;
				position: relative;
				height: 100vh;
				width: 100vw;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #000;
			}

			.travel-slider * {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			.travel-slider .slide {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
				transition: opacity 1s ease-in-out, transform 1s ease-in-out;
				background-size: cover;
				background-position: center;
				z-index: 1;
			}

			.travel-slider .slide.active {
				opacity: 1;
				transform: scale(1);
			}

			.travel-slider .content {
				position: absolute;
				left: 50px;
				bottom: 200px;
				color: white;
				z-index: 2;
				max-width: 300px;
			}

			.travel-slider .location {
				font-size: 18px;
				opacity: 0.8;
			}

			.travel-slider .title {
				font-size: 64px;
				font-weight: bold;
				margin: 10px 0;
			}

			.travel-slider .thumbnails {
				position: absolute;
				bottom: 300px;
				right: 10%;
				display: flex;
				gap: 20px;
				z-index: 2;
				overflow-x: hidden;
				width: auto;
				transform: translateX(20%);
			}

			.travel-slider .thumbnail {
				width: 250px;
				height: 200px;
				border-radius: 10px;
				overflow: hidden;
				cursor: pointer;
				transition: transform 0.3s ease, box-shadow 0.3s ease;
				position: relative;
				backdrop-filter: blur(10px);
				background: rgba(255, 255, 255, 0.1);
			}

			.travel-slider .thumbnail:hover {
				transform: scale(1.05);
				box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
			}

			.travel-slider .thumbnail.active {
				transform: scale(1.1);
				box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
			}

			.travel-slider .thumbnail img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.travel-slider .thumbnail-content {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				padding: 15px;
				color: white;
				background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
				font-size: 14px;
				text-align: center;
			}

			.travel-slider .page-counter {
				position: absolute;
				bottom: 50px;
				right: 150px;
				color: white;
				font-size: 24px;
				font-weight: bold;
			}

			.travel-slider .overlay {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
				z-index: 1;
			}

			@media (max-width: 768px) {
				.travel-slider .content {
					left: 20px;
					bottom: 150px;
					max-width: 250px;
				}

				.travel-slider .title {
					font-size: 48px;
				}

				.travel-slider .thumbnails {
					bottom: 20px;
					right: 20px;
					gap: 10px;
				}

				.travel-slider .thumbnail {
					width: 150px;
					height: 90px;
				}

				.travel-slider .page-counter {
					right: 100px;
					font-size: 20px;
				}
			}
		</style>
		<style>
			.timeline-module * {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			.timeline-module {
				font-family: 'Microsoft YaHei', Arial, sans-serif;
				background: #f5f5f5;
				color: #333;
			}

			.timeline-module .container {
				display: flex;
				max-width: 1800px;
				margin: 0 auto;
				padding: 20px;
				gap: 40px;
			}

			.timeline-module .content-panel {
				flex: 0 0 400px;
				padding: 20px;
			}

			.timeline-module .history-card {
				background: white;
				padding: 20px;
				margin-bottom: 30px;
				border-radius: 8px;
				box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			}

			.timeline-module .history-card h2 {
				font-size: 1.2em;
				color: #333;
				margin-bottom: 15px;
			}

			.timeline-module .history-card img {
				width: 100%;
				height: 200px;
				object-fit: cover;
				margin: 10px 0;
				border-radius: 4px;
			}

			.timeline-module .history-card p {
				font-size: 0.9em;
				line-height: 1.6;
				color: #666;
			}

			.timeline-module .timeline-container {
				flex: 1;
				position: relative;
				padding: 20px;
				overflow-x: hidden;
			}

			.timeline-module .timeline {
				position: relative;
				min-height: 2000px;
			}

			.timeline-module .timeline-path {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				pointer-events: none;
			}

			.timeline-module .path {
				stroke-dasharray: 8000;
				stroke-dashoffset: 8000;
				animation: drawPath 10s forwards ease-out;
			}

			@keyframes drawPath {
				to {
					stroke-dashoffset: 0;
				}
			}

			.timeline-module .timeline-node {
				position: absolute;
				width: 40px;
				height: 40px;
				background: #fff;
				border-radius: 50%;
				border: 3px solid #4a90e2;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				transition: all 0.3s ease;
				z-index: 2;
			}

			.timeline-module .timeline-node:hover {
				transform: scale(1.1);
				box-shadow: 0 0 15px rgba(74, 144, 226, 0.3);
			}

			.timeline-module .timeline-node img {
				width: 20px;
				height: 20px;
				object-fit: contain;
			}

			.timeline-module .year-label {
				position: absolute;
				font-size: 14px;
				font-weight: bold;
				color: #4a90e2;
				transform: translateX(-50%);
			}

			.timeline-module .event-content {
				position: absolute;
				background: white;
				padding: 15px;
				border-radius: 8px;
				box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
				width: 250px;
				opacity: 0;
				transition: opacity 0.3s ease;
				pointer-events: none;
				font-size: 0.9em;
			}

			.timeline-module .timeline-node:hover+.event-content {
				opacity: 1;
			}

			.timeline-module .navigation {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				background: rgba(255, 255, 255, 0.9);
				padding: 15px 30px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
				z-index: 100;
			}

			.timeline-module .nav-link {
				color: #4a90e2;
				text-decoration: none;
				padding: 8px 20px;
				border-radius: 20px;
				transition: background-color 0.3s;
				font-weight: bold;
			}

			.timeline-module .nav-link:hover {
				background-color: #4a90e2;
				color: white;
			}
		</style>

		<style>
			.youth-dream-module * {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				font-family: Arial, sans-serif;
			}

			.youth-dream-module {
				max-width: 1200px;
				margin: 20px auto;
				padding: 20px;
				background: #fff;
				border: 1px solid #ddd;
				border-radius: 5px;
			}

			.youth-dream-module .header {
				display: flex;
				justify-content: space-between;
				margin-bottom: 30px;
			}

			.youth-dream-module .header h1 {
				color: #333;
				font-size: 24px;
				font-weight: normal;
			}

			.youth-dream-module .top-section {
				display: flex;
				gap: 40px;
				margin-bottom: 40px;
			}

			.youth-dream-module .welcome-image {
				flex: 1;
			}

			.youth-dream-module .welcome-image img {
				width: 100%;
				height: auto;
				max-height: 200px;
				object-fit: cover;
			}

			.youth-dream-module .services {
				flex: 1;
			}

			.youth-dream-module .services h2 {
				color: #333;
				font-size: 24px;
				font-weight: normal;
				margin-bottom: 20px;
			}

			.youth-dream-module .services ul {
				list-style-type: disc;
				padding-left: 20px;
				color: #666;
			}

			.youth-dream-module .services li {
				margin-bottom: 10px;
			}

			.youth-dream-module .publications h2 {
				color: #333;
				font-size: 24px;
				font-weight: normal;
				margin-bottom: 30px;
			}

			.youth-dream-module .publications-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 20px;
			}

			.youth-dream-module .publication-card {
				background: #fff;
				border: 1px solid #ddd;
				border-radius: 5px;
				overflow: hidden;
			}

			.youth-dream-module .publication-card img {
				width: 100%;
				height: 200px;
				object-fit: cover;
				margin-bottom: 15px;
			}

			.youth-dream-module .publication-card p {
				color: #666;
				font-size: 14px;
				line-height: 1.6;
				padding: 0 10px;
				margin-bottom: 15px;
			}

			.youth-dream-module .read-more {
				display: inline-block;
				padding: 8px 20px;
				background: #333;
				color: white;
				text-decoration: none;
				font-size: 14px;
				border-radius: 3px;
				margin: 0 10px 10px;
			}

			.youth-dream-module .read-more:hover {
				background: #444;
			}
		</style>


		<style>
			/* 封装样式 */
			.outstanding-youth-module * {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				font-family: Arial, sans-serif;
			}

			.outstanding-youth-module {
				max-width: 1200px;
				margin: 0 auto;
				padding: 20px;
				background: #fff;
			}

			.outstanding-youth-module .header {
				display: flex;
				justify-content: space-between;
				margin-bottom: 30px;
			}

			.outstanding-youth-module .header h1 {
				color: #333;
				font-size: 24px;
				font-weight: normal;
			}

			.outstanding-youth-module .header h2 {
				color: #333;
				font-size: 20px;
				font-weight: normal;
			}

			.outstanding-youth-module .top-section {
				display: flex;
				gap: 40px;
				margin-bottom: 40px;
			}

			.outstanding-youth-module .welcome-image {
				flex: 1;
			}

			.outstanding-youth-module .welcome-image img {
				width: 100%;
				height: auto;
				max-height: 200px;
				object-fit: cover;
			}

			.outstanding-youth-module .services {
				flex: 1;
			}

			.outstanding-youth-module .services h2 {
				color: #333;
				font-size: 24px;
				font-weight: normal;
				margin-bottom: 20px;
			}

			.outstanding-youth-module .services ul {
				list-style-type: disc;
				padding-left: 20px;
				color: #666;
			}

			.outstanding-youth-module .services li {
				margin-bottom: 10px;
			}

			.outstanding-youth-module .publications h2 {
				color: #333;
				font-size: 24px;
				font-weight: normal;
				margin-bottom: 30px;
			}

			.outstanding-youth-module .publications-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 20px;
			}

			.outstanding-youth-module .publication-card {
				background: #fff;
			}

			.outstanding-youth-module .publication-card img {
				width: 100%;
				height: 200px;
				object-fit: cover;
				margin-bottom: 15px;
			}

			.outstanding-youth-module .publication-card p {
				color: #666;
				font-size: 14px;
				line-height: 1.6;
				margin-bottom: 15px;
			}

			.outstanding-youth-module .read-more {
				display: inline-block;
				padding: 8px 20px;
				background: #333;
				color: white;
				text-decoration: none;
				font-size: 14px;
				border-radius: 3px;
			}

			.outstanding-youth-module .read-more:hover {
				background: #444;
			}
		</style>
		<style>
			.youth-dream-module * {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
			}

			.youth-dream-module {
				max-width: 1200px;
				margin: 0 auto;
				padding: 20px;
			}

			.youth-dream-module .header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 40px;
			}

			.youth-dream-module .header h1 {
				font-size: 24px;
				font-weight: bold;
			}

			.youth-dream-module .nav {
				display: flex;
				gap: 20px;
			}

			.youth-dream-module .nav a {
				text-decoration: none;
				color: #666;
				font-size: 16px;
			}

			.youth-dream-module .nav a.active {
				color: #ff4757;
			}

			.youth-dream-module .main-content {
				display: grid;
				grid-template-columns: 1fr 300px;
				gap: 40px;
			}

			.youth-dream-module .articles {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 30px;
			}

			.youth-dream-module .article {
				position: relative;
				border-radius: 10px;
				overflow: hidden;
				background: white;
				box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			}

			.youth-dream-module .article img {
				width: 100%;
				height: 250px;
				object-fit: cover;
			}

			.youth-dream-module .article-content {
				padding: 20px;
			}

			.youth-dream-module .category {
				display: inline-block;
				background: #ffebee;
				color: #ff4757;
				padding: 5px 10px;
				border-radius: 5px;
				font-size: 12px;
				margin-bottom: 10px;
			}

			.youth-dream-module .article-title {
				font-size: 18px;
				font-weight: bold;
				color: #333;
				text-decoration: none;
			}

			.youth-dream-module .sidebar h2 {
				font-size: 24px;
				margin-bottom: 30px;
			}

			.youth-dream-module .social-stats {
				display: grid;
				gap: 20px;
			}

			.youth-dream-module .social-stat {
				display: flex;
				align-items: center;
				padding: 15px;
				background: #f8f9fa;
				border-radius: 10px;
			}

			.youth-dream-module .social-stat .icon {
				width: 40px;
				height: 40px;
				border-radius: 10px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 15px;
			}

			.youth-dream-module .facebook .icon {
				background: #3b5998;
				color: white;
			}

			.youth-dream-module .twitter .icon {
				background: #1da1f2;
				color: white;
			}

			.youth-dream-module .instagram .icon {
				background: #e1306c;
				color: white;
			}

			.youth-dream-module .youtube .icon {
				background: #ff0000;
				color: white;
			}

			.youth-dream-module .stat-numbers {
				font-size: 18px;
				font-weight: bold;
				color: #333;
			}

			.youth-dream-module .stat-label {
				font-size: 14px;
				color: #666;
			}

			.youth-dream-module .event-banner {
				margin-top: 40px;
				border-radius: 10px;
				overflow: hidden;
			}

			.youth-dream-module .event-banner img {
				width: 100%;
				height: auto;
			}

			@media (max-width: 1024px) {
				.youth-dream-module .main-content {
					grid-template-columns: 1fr;
				}

				.youth-dream-module .articles {
					grid-template-columns: 1fr;
				}
			}
		</style>




	</head>
	<body>
		<div class="preloader">
			<div class="preloader-body">
				<div class="cssload-container">
					<div class="cssload-speeding-wheel"></div>
				</div>
				<p>Loading...</p>
			</div>
		</div>
		<div class="page">
			<!-- Page Header-->
			<header class="section page-header">
				<!-- RD Navbar-->
				<div class="rd-navbar-wrap">
					<nav class="rd-navbar rd-navbar-corporate" data-layout="rd-navbar-fixed"
						data-sm-layout="rd-navbar-fixed" data-md-layout="rd-navbar-fixed"
						data-md-device-layout="rd-navbar-fixed" data-lg-layout="rd-navbar-static"
						data-lg-device-layout="rd-navbar-fixed" data-xl-layout="rd-navbar-static"
						data-xl-device-layout="rd-navbar-static" data-xxl-layout="rd-navbar-static"
						data-xxl-device-layout="rd-navbar-static" data-lg-stick-up-offset="46px"
						data-xl-stick-up-offset="46px" data-xxl-stick-up-offset="106px" data-lg-stick-up="true"
						data-xl-stick-up="true" data-xxl-stick-up="true">
						<div class="rd-navbar-collapse-toggle rd-navbar-fixed-element-1"
							data-rd-navbar-toggle=".rd-navbar-collapse"><span></span></div>
						<div class="rd-navbar-aside-outer">
							<div class="rd-navbar-aside">
								<!-- RD Navbar Panel-->
								<div class="rd-navbar-panel">
									<!-- RD Navbar Toggle-->
									<button class="rd-navbar-toggle"
										data-rd-navbar-toggle=".rd-navbar-nav-wrap"><span></span></button>
									<!-- RD Navbar Brand-->
									<div class="rd-navbar-brand"><a class="brand" href="index.html"><img
												src="images/图标.jpg" alt="" width="188" height="19" /></a></div>
								</div>
								<div class="rd-navbar-aside-right rd-navbar-collapse">
									<ul class="rd-navbar-corporate-contacts">
										<li>
											<div class="unit unit-spacing-xs">
												<div class="unit-left"><span class="icon fa fa-clock-o"></span></div>
												<div class="unit-body">
													<p>09:00<span>am</span> — 05:00<span>pm</span></p>
												</div>
											</div>
										</li>
										<li>
											<div class="unit unit-spacing-xs">
												<div class="unit-left"><span class="icon fa fa-phone"></span></div>
												<div class="unit-body"><a class="link-phone"
														href="tel:#">0851-7273643</a></div>
											</div>
										</li>
									</ul><a class="button button-md button-default-outline-2 button-ujarak"
										href="#">获取热门资讯</a>
								</div>
							</div>
						</div>
						<div class="rd-navbar-main-outer">
							<div class="rd-navbar-main">
								<div class="rd-navbar-nav-wrap">
									<ul class="list-inline list-inline-sm social-list">
										<li><a class="icon fal fa-comments" href="https://wx.qq.com/"></a></li>
										<!-- 微信图标 -->
										<li><a class="icon fa fa-weibo"
												href="https://weibo.com/newlogin?tabtype=weibo&gid=102803&openLoginLayer=0&url=https%3A%2F%2Fwww.weibo.com%2F"></a>
										</li> <!-- 微博图标 -->
										<li><a class="icon fa fa-qq" href="https://im.qq.com/index/"></a></li>
										<!-- QQ图标 -->
									</ul>
									<!-- RD Navbar Nav-->
									<ul class="rd-navbar-nav">
										<li class="rd-nav-item"><a class="rd-nav-link" href="index.html">华诞七十五周年</a>
										<li class="rd-nav-item"><a class="rd-nav-link" href="数智经济.html">数智经济</a>
										<li class="rd-nav-item"><a class="rd-nav-link" href="快讯.html">时事快报</a>
											<!-- RD Navbar Dropdown-->
											<ul class="rd-menu rd-navbar-dropdown">
												<li class="rd-dropdown-item"><a class="rd-dropdown-link"
														href="快讯.html">盛世华章——国旗升起的时刻</a></li>
												<li class="rd-dropdown-item"><a class="rd-dropdown-link"
														href="发展.html">新中国发展——从崛起到辉煌</a></li>
												<li class="rd-dropdown-item"><a class="rd-dropdown-link"
														href="辉煌.html">辉煌成就——途中的璀璨华章</a></li>
											</ul>
										</li>
										<li class="rd-nav-item"><a class="rd-nav-link" href="团结.html">团结一心</a>
										</li>
										<li class="rd-nav-item "><a class="rd-nav-link" href="利刃.html">国之楷模</a>
										<li class="rd-nav-item active"><a class="rd-nav-link" href="青年.html">青年筑梦</a>
											<!-- RD Navbar Megamenu-->

										</li>
									</ul>
								</div>
							</div>
						</div>
					</nav>
				</div>
			</header>







			<div class="travel-slider">
				<div class="slide active">
					<div class="overlay"></div>
					<img src="images/青年1.jpg" alt="Saint Antonien"
						style="width: 100%; height: 100%; object-fit: cover;">
					<div class="content">
						<div class="location"></div>
						<div class="title"></div>
						<button
							style="padding: 10px 20px; background: transparent; border: 2px solid white; color: white; cursor: pointer;">
							青年筑梦
						</button>
					</div>
				</div>

				<div class="thumbnails">
					<div class="thumbnail active">
						<img src="images/青年2.jpg" alt="Saint Antonien">
						<div class="thumbnail-content">
							<div></div>
							<div style="font-weight: bold">奋发图强</div>
						</div>
					</div>
					<div class="thumbnail">
						<img src="images/青年3.jpg" alt="Nagano">
						<div class="thumbnail-content">
							<div></div>
							<div style="font-weight: bold">五四运动</div>
						</div>
					</div>
					<div class="thumbnail">
						<img src="images/青年1.jpg" alt="Marrakech">
						<div class="thumbnail-content">
							<div></div>
							<div style="font-weight: bold">运动健儿</div>
						</div>
					</div>
					<div class="thumbnail">
						<img src="images/青年4.jpg" alt="Yosemite">
						<div class="thumbnail-content">
							<div></div>
							<div style="font-weight: bold">迎风生长</div>
						</div>
					</div>
				</div>

				<div class="navigation">
					<div class="nav-btn prev">←</div>
					<div class="nav-btn next">→</div>
				</div>

				<div class="page-counter">01</div>
			</div>



			<div class="youth-dream-module">
				<div class="header">
					<h1>中国青年筑梦</h1>
				</div>

				<div class="top-section">
					<div class="welcome-image">
						<img src="images/奋斗.JPG" alt="青年奋斗">
						<p>青年是祖国的未来，怀抱梦想，勇敢追求。我们为每一个中国青年提供支持，帮助他们实现自己的理想。</p>
					</div>
					<div class="services">
						<h2>青年寄语</h2>
						<ul>
							<li>青春是奋斗的时光，勇敢追梦，别怕失败，每一次跌倒，都是离成功更近的一步。</li>
							<li>青年应有远见，敢于创新，不仅要有大梦想，更要有实现梦想的毅力与行动。</li>
							<li>人生最宝贵的财富是时间，不要浪费它。坚持学习、把握每一刻，成就更好的自己。</li>
							<li>青春是成长的过程，充满挑战和迷茫，但也因坚持而闪耀。</li>
							<li>勇敢面对并解决问题，你的能力会在挑战中不断提升，收获更多可能。</li>
						</ul>
					</div>
				</div>

				<div class="publications">
					<h2>最新动态</h2>
					<div class="publications-grid">
						<div class="publication-card">
							<img src="images/一带一路.jpg" alt="青年新闻 1">
							<p>中国青年积极参与“一带一路”倡议，助力国家发展与全球合作。</p>
							<a href="#" class="read-more">了解更多</a>
						</div>
						<div class="publication-card">
							<img src="images/创新创业(1).jpg" alt="青年新闻 2">
							<p>青年创新创业大赛成功举办，数百个项目脱颖而出，点亮梦想。</p>
							<a href="#" class="read-more">了解更多</a>
						</div>
						<div class="publication-card">
							<img src="images/奋斗2.JPG" alt="青年新闻 3">
							<p>心理健康重要性日益受到关注，为青年提供专业的心理辅导和支持。</p>
							<a href="#" class="read-more">了解更多</a>
						</div>
					</div>
				</div>
			</div>



			<div class="outstanding-youth-module">
				<!-- Header Section -->
				<div class="header">
					<h1>激励与卓越</h1>
					<h2></h2>
				</div>

				<!-- Top Section: Introduction and Services -->
				<div class="top-section">
					<div class="welcome-image">
						<img src="images/运动大.jpg" alt="中国优秀青年">
						<p>中国的年轻运动员、学者、演员们展现了非凡的勇气、才华和奉献精神，在国内外产生了广泛的影响。</p>
					</div>
					<div class="services">
						<h2></h2>
						<ul>
							<li>拼搏在赛场，汗水诠释梦想，荣耀属于每个坚持不懈的运动员。</li>
							<li>胜负一时，拼搏一生，用汗水铸就赛场上的辉煌与荣耀。</li>
							<li>心中的热爱不灭，每一秒奋斗，都成就更强大的自己。</li>
							<li>成绩是目标，拼搏是信念，用实力证明，用热血成就自我。</li>
						</ul>
					</div>
				</div>

				<!-- Publications Section -->
				<div class="publications">
					<h2>中国优秀青年的最新成就</h2>
					<div class="publications-grid">
						<!-- Publication 1 -->
						<div class="publication-card">
							<img src="images/运动.jpg" alt="优秀运动员 1">
							<p>中国的年轻运动员在全球舞台上不断突破自我，创造骄人的成绩，成为国家的骄傲。</p>
							<a href="#" class="read-more">阅读更多</a>
						</div>

						<!-- Publication 2 -->
						<div class="publication-card">
							<img src="images/科研.jpg" alt="天才少年 2">
							<p>年轻的科技和学术天才正在引领着未来的创新，改变世界的面貌。</p>
							<a href="#" class="read-more">阅读更多</a>
						</div>

						<!-- Publication 3 -->
						<div class="publication-card">
							<img src="images/演员.jpg" alt="青年演员 3">
							<p>探索年轻演员们在全球电影舞台上的成长历程，他们打破文化壁垒，展示出色的演技。</p>
							<a href="#" class="read-more">阅读更多</a>
						</div>
					</div>
				</div>
			</div>










			<div class="youth-dream-module">
				<header class="header">
					<h1>筑梦未来青年平台</h1>
					<nav class="nav">
						<a href="#" class="active">所有文章</a>
						<a href="#">创新创业</a>
						<a href="#">社会实践</a>
						<a href="#">科技前沿</a>
						<a href="#">文化交流</a>
						<a href="#">青年榜样</a>
					</nav>
					<h2>关注我们</h2>
				</header>

				<div class="main-content">
					<div class="articles">
						<article class="article">
							<img src="images/青年科技.jpg" alt="青年创新活动">
							<div class="article-content">
								<span class="category">青年创新</span>
								<h3><a href="#" class="article-title">中国青年科技创新大赛纪实</a></h3>
							</div>
						</article>

						<article class="article">
							<img src="images/青年乡村振兴.jpg" alt="社会实践">
							<div class="article-content">
								<span class="category">社会实践</span>
								<h3><a href="#" class="article-title">走进基层，青年助力乡村振兴</a></h3>
							</div>
						</article>

						<article class="article">
							<img src="images/青年交流.jpg" alt="文化交流">
							<div class="article-content">
								<span class="category">文化交流</span>
								<h3><a href="#" class="article-title">跨国交流，青年文化桥梁</a></h3>
							</div>
						</article>

						<article class="article">
							<img src="images/青年榜样.jpg" alt="榜样活动">
							<div class="article-content">
								<span class="category">青年榜样</span>
								<h3><a href="#" class="article-title">青春榜样故事分享会</a></h3>
							</div>
						</article>
					</div>

					<aside class="sidebar">
						<div class="social-stats">
							<div class="social-stat facebook">
								<div class="icon">f</div>
								<div class="stat-info">
									<div class="stat-numbers">10,245</div>
									<div class="stat-label">粉丝</div>
								</div>
							</div>

							<div class="social-stat twitter">
								<div class="icon">t</div>
								<div class="stat-info">
									<div class="stat-numbers">9,030</div>
									<div class="stat-label">粉丝</div>
								</div>
							</div>

							<div class="social-stat instagram">
								<div class="icon">i</div>
								<div class="stat-info">
									<div class="stat-numbers">12,400</div>
									<div class="stat-label">粉丝</div>
								</div>
							</div>

							<div class="social-stat youtube">
								<div class="icon">y</div>
								<div class="stat-info">
									<div class="stat-numbers">15,320</div>
									<div class="stat-label">粉丝</div>
								</div>
							</div>
						</div>

						<div class="event-banner">
							<img src="images/青年活动.jpg" alt="青年活动">
						</div>
					</aside>
				</div>
			</div>















			<!-- Page Footer-->

			<footer class="section footer-corporate context-dark">
				<div class="footer-corporate-inset">
					<div class="container">
						<div class="row row-40 justify-content-lg-between">
							<div class="col-sm-6 col-md-12 col-lg-3 col-xl-4">
								<div class="oh-desktop">
									<div class="wow slideInRight" data-wow-delay="0s">
										<h6 class="text-spacing-100 text-uppercase">联系我们</h6>
										<ul class="footer-contacts d-inline-block d-sm-block">
											<li>
												<div class="unit">
													<div class="unit-left"><span class="icon fa fa-phone"></span></div>
													<div class="unit-body"><a class="link-phone"
															href="tel:#">0851-7273643</a></div>
												</div>
											</li>
											<li>
												<div class="unit">
													<div class="unit-left"><span class="icon fa fa-envelope"></span>
													</div>
													<div class="unit-body"><a class="link-aemail"
															href="mailto:#">736485639@qq.com</a></div>
												</div>
											</li>
											<li>
												<div class="unit">
													<div class="unit-left"><span
															class="icon fa fa-location-arrow"></span></div>
													<div class="unit-body"><a class="link-location"
															href="#">贵阳人文科技学院</a></div>
												</div>
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="col-sm-6 col-md-5 col-lg-3 col-xl-4">
								<div class="oh-desktop">
									<div class="wow slideInDown" data-wow-delay="0s">
										<h6 class="text-spacing-100 text-uppercase">热门新闻</h6>
										<!-- Post Minimal 2-->
										<article class="post post-minimal-2">
											<p class="post-minimal-2-title"><a href="blog-post.html">盛世华章——国旗升起的时刻</a>
											</p>
											<div class="post-minimal-2-time">
												<time datetime="2022-05-04">10 01, 2024</time>
											</div>
										</article>
										<!-- Post Minimal 2-->
										<article class="post post-minimal-2">
											<p class="post-minimal-2-title"><a href="blog-post.html">筑牢民族团结，共建美好家园</a>
											</p>
											<div class="post-minimal-2-time">
												<time datetime="2022-05-04">10 01, 2024</time>
											</div>
										</article>
									</div>
								</div>
							</div>
							<div class="col-sm-11 col-md-7 col-lg-5 col-xl-4">
								<div class="oh-desktop">
									<div class="wow slideInLeft" data-wow-delay="0s">
										<h6 class="text-spacing-100 text-uppercase">快速导航</h6>
										<ul
											class="row-6 list-0 list-marked list-marked-md list-marked-secondary list-custom-2">
											<li><a href="index.html">华诞七十五周年</a></li>
											<li><a href="our-tours.html">数智经济</a></li>
											<li><a href="快讯.html">时事快报</a></li>
											<li><a href="团结.html">团结一心</a></li>
											<li><a href="利刃.html">国之楷模</a></li>
										</ul>
										<div class="group-md group-middle justify-content-sm-start"><a
												class="button button-lg button-primary button-ujarak" href="#">回到首页</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</footer>
		</div>
		<!-- Global Mailform Output-->
		<div class="snackbars" id="form-output-global"></div>
		<!-- Javascript-->
		<script src="js/core.min.js"></script>
		<script>
			document.addEventListener('DOMContentLoaded', () => {
				const timeline = document.querySelector('.timeline');
				const items = document.querySelectorAll('.timeline-item');
				const leftButton = document.querySelector('.scroll-button.left');
				const rightButton = document.querySelector('.scroll-button.right');
				// Intersection Observer for animations
				const observer = new IntersectionObserver((entries) => {
					entries.forEach(entry => {
						if (entry.isIntersecting) {
							entry.target.classList.add('visible');
						}
					});
				}, {
					threshold: 0.5
				});
				items.forEach(item => observer.observe(item));
				// Scroll buttons
				leftButton.addEventListener('click', () => {
					timeline.scrollBy({
						left: -300,
						behavior: 'smooth'
					});
				});
				rightButton.addEventListener('click', () => {
					timeline.scrollBy({
						left: 300,
						behavior: 'smooth'
					});
				});
			});
		</script>
		<script src="js/script.js"></script>
		<script>
			const container = document.querySelector('.card-module-container');
			const cards = container.querySelectorAll('.card');
			const spacing = 150;

			function spreadCards() {
				cards.forEach((card, index) => {
					const direction = index % 2 === 0 ? 1 : -1;
					const position = Math.ceil(index / 2) * spacing * direction;
					const zIndex = index + 1;
					const rotateY = (Math.random() * 30) - 15;
					const rotateX = (Math.random() * 20) - 10;

					card.style.transform =
						`translate3d(${position}px, 0, 0) rotateY(${rotateY}deg) rotateX(${rotateX}deg)`;
					card.style.zIndex = zIndex;
				});
			}

			function gatherCards() {
				cards.forEach((card, index) => {
					const zOffset = Math.random() * 50;
					const rotateY = 180 + (Math.random() * 30);
					const rotateX = 10 + (Math.random() * 20);

					card.style.transform =
						`translate3d(0, 0, ${zOffset}px) rotateY(${rotateY}deg) rotateX(${rotateX}deg)`;
					card.style.zIndex = index;
				});
			}

			gatherCards();
			setTimeout(spreadCards, 1000);
			setTimeout(gatherCards, 5000);

			setInterval(() => {
				gatherCards();
				setTimeout(spreadCards, 1000);
			}, 12000);
		</script>
		<script>
			const thumbnails = document.querySelectorAll('.travel-slider .thumbnail');
			const prevBtn = document.querySelector('.travel-slider .prev');
			const nextBtn = document.querySelector('.travel-slider .next');
			const counter = document.querySelector('.travel-slider .page-counter');
			let currentIndex = 0;
			let autoSlideInterval;

			function updateSlide(index) {
				thumbnails.forEach(thumb => thumb.classList.remove('active'));
				thumbnails[index].classList.add('active');

				counter.textContent = (index + 1).toString().padStart(2, '0');
				const mainSlide = document.querySelector('.travel-slider .slide');

				mainSlide.classList.remove('active');
				setTimeout(() => {
					mainSlide.querySelector('img').src = thumbnails[index].querySelector('img').src;
					const thumbContent = thumbnails[index].querySelector('.thumbnail-content');
					const mainContent = document.querySelector('.travel-slider .content');
					mainContent.querySelector('.location').textContent = thumbContent.children[0].textContent;
					mainContent.querySelector('.title').textContent = thumbContent.children[1].textContent;
					mainSlide.classList.add('active');
				}, 400);
			}

			function autoSlide() {
				autoSlideInterval = setInterval(() => {
					currentIndex = (currentIndex + 1) % thumbnails.length;
					updateSlide(currentIndex);
				}, 2000);
			}

			function resetAutoSlide() {
				clearInterval(autoSlideInterval);
				autoSlide();
			}

			thumbnails.forEach((thumbnail, index) => {
				thumbnail.addEventListener('click', () => {
					currentIndex = index;
					updateSlide(currentIndex);
					resetAutoSlide();
				});
			});

			prevBtn.addEventListener('click', () => {
				currentIndex = (currentIndex - 1 + thumbnails.length) % thumbnails.length;
				updateSlide(currentIndex);
				resetAutoSlide();
			});

			nextBtn.addEventListener('click', () => {
				currentIndex = (currentIndex + 1) % thumbnails.length;
				updateSlide(currentIndex);
				resetAutoSlide();
			});

			document.addEventListener('keydown', (e) => {
				if (e.key === 'ArrowLeft') prevBtn.click();
				if (e.key === 'ArrowRight') nextBtn.click();
			});

			autoSlide();
		</script>
		<script>
			document.querySelectorAll('.timeline-module .timeline-node').forEach(node => {
				node.addEventListener('mouseover', () => {
					const content = node.nextElementSibling.nextElementSibling;
					content.style.opacity = '1';
				});

				node.addEventListener('mouseout', () => {
					const content = node.nextElementSibling.nextElementSibling;
					content.style.opacity = '0';
				});
			});

			const observer = new IntersectionObserver((entries) => {
				entries.forEach(entry => {
					if (entry.isIntersecting) {
						entry.target.style.animation = 'drawPath 10s forwards ease-out';
					}
				});
			});

			document.querySelectorAll('.timeline-module .path').forEach(path => {
				observer.observe(path);
			});
		</script>





	</body>
</html>